﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Profile.aspx.cs" Inherits="PaydSystem.UI.Member.Profile" %>

<!DOCTYPE html>

<html lang="en"  >
<head id="Head1" runat="server">
    <title></title>

    <style>
    table {
        border-color:White !important;
        width: 100% !important;
        
    }
 
    th, td {
    
        padding: 1px 1px 1px 1px !important;
        border:3px solid White !important;
        font-size:70% !important;
    }
    th 
    {
        text-align: center !important;
        background-color: #CECECE !important;
        color: black !important;
        
    }
    td {
        background-color: #F5F5F5 !important;
        color: black !important;
    }


     .btn-home1 {
          color: #fff !important;
          background-color: #9D9D9D !important;
          border-color: #9D9D9D !important;
    }

    .bg-detail {
        background-color:#E5EAEC !important;
    }
    #main {
        width: 220px !important;
        height: 300px !important;
        border: 1px solid black !important;
        display: -webkit-flex !important; /* Safari */
        -webkit-align-items: center !important; /* Safari 7.0+ */
        display: flex !important;
        align-items: center !important;
    }

    IMG.displayed {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important 
    }

    #box1{

        right:0px !important;

    }
    .adjustLabel
    {
        margin-top:5px !important;
    }
    .bg1
    {
        background-color: #F5F5F5 !important;
        color: #224096 !important;
        margin:5px 0 5px 0 !important;
    }
    .detail-LR
    {
        padding:0 80px 0 80px !important;
        }
    .font-detail2
    {
        font-size:80% !important;
        }
    .bg-mm
    {
        margin:1px 0 1px 0 !important;
        background-color: #F5F5F5 !important;
        text-align:center !important;
        font-size:80% !important;
        }
    .bg-road
    {
        margin:1px 0 1px 0 !important;
        background-color: #DADADA !important;
        text-align:center !important;
        font-size:80% !important;
        }
    </style>
</head>
<body>
    <div ng-init="init();">
        <div class="container">
            <div style="height:45px">
                <img src="../../Images/PaydImages/head_login.png" style="width:100%;" />
            </div>
            <br />
            <div class="detail-LR">
                <div>
                    สวัสดี! {{fullName}} คุณเข้าระบบครั้งสุดท้ายเมื่อวันที่ 20 มิถุนายน 2559
                </div>
                <br />
                <div class="panel panel-default box-shadow">
                    <div class="panel-heading">
                        <hgroup>
                            <h3 class="panel-title">1.ข้อมูลผู้ใช้</h3>
                        </hgroup>
                    </div>
                    <div class="panel-body" style="padding:30px 30px 30px 30px">
                      <div class="row" >
                        <div class="col-xs-9 col-sm-10 col-md-10 col-lg-10" >
                            <div class="row">
                                <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2 bg1">
                                ชื่อ - นามสกุล
                                </div>
                                <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10 bg1">
                                {{fullName}}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2 bg1">
                                ที่อยู่ติดต่อ
                                </div>
                                <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10 bg1">
                                {{address}}
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2">
                            <IMG class="displayed img-responsive" alt="Responsive image" src="../../Images/PaydImages/Gauge.png" style="width:100%; height:inherit;">
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="table-responsive">
                                <table>
                                        <thead>
                                          <tr>
                                                <th style="width:auto;">Policy No.</th>
                                                <th style="width:auto;">Start Date</th>
                                                <th style="width:auto;">End Date</th>
                                                <th style="width:auto;">Gross Prem</th>
                                                <th style="width:auto;">รุ่น</th>
                                                <th style="width:auto;">สี</th>
                                                <th style="width:auto;">Chasis No.</th>
                                                <th style="width:auto;">Engine No.</th>
                                                <th style="width:auto;">ทะเบียนรถ</th>
                                                <th style="width:auto;">IMEI No.</th>
                                                <th style="width:auto;">Staus</th>
                                          </tr>
                                        </thead>
                                    <tbody>
                                        <tr>
                                            <td style="text-align:center;">115013</td>
                                            <td style="text-align:center;">12/07/16</td>
                                            <td style="text-align:center;">12/07/17</td>
                                            <td style="text-align:center;">XXXX</td>
                                            <td style="text-align:center;">Fortuner</td>
                                            <td style="text-align:center;">xxxxx</td>
                                            <td style="text-align:center;">MR0ZR69G600130950</td>
                                            <td style="text-align:center;">xxxxx</td>
                                            <td style="text-align:center;">A1234</td>
                                            <td style="text-align:center;">2KDA770770</td>
                                            <td style="text-align:center;">ปกติ</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align:center;">115014</td>
                                            <td style="text-align:center;">12/07/16</td>
                                            <td style="text-align:center;">12/07/17</td>
                                            <td style="text-align:center;">XXXX</td>
                                            <td style="text-align:center;">Fortuner</td>
                                            <td style="text-align:center;">xxxxx</td>
                                            <td style="text-align:center;">MR0ZR69G600130950</td>
                                            <td style="text-align:center;">xxxxx</td>
                                            <td style="text-align:center;">A1234</td>
                                            <td style="text-align:center;">2KDA770770</td>
                                            <td style="text-align:center;">ปกติ</td>
                                        </tr>
                                        
                                    </tbody>
                                </table>
                              </div>
                              
                        </div>
                      </div>
                      
                    </div>
                </div>
                
                <div class="panel panel-default box-shadow">
                    <div class="panel-heading">
                        <hgroup>
                            <h3 class="panel-title">2.รายงานข้อมูลการใช้งาน</h3>
                        </hgroup>
                    </div>
                    <div class="panel-body">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="table-responsive">
                                <table>
                                        <thead>
                                          <tr>
                                                <th style="width:auto;">ลำดับ</th>
                                                <th style="width:auto;">วันที่เริ่ม/เวลา</th>
                                                <th style="width:auto;">วันที่สิ้นสุด/เวลา</th>
                                                <th style="width:auto;">ระยะทางเริ่มต้น</th>
                                                <th style="width:auto;">ระยะทางสิ้นสุด</th>
                                                <th style="width:auto;">ระยะทางสะสม</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td style="text-align:center;">1</td>
                                                <td style="text-align:center;">12/07/16 12:00</td>
                                                <td style="text-align:center;">12/07/17 18:00</td>
                                                <td style="text-align:center;">XXXX</td>
                                                <td style="text-align:center;">Fortuner</td>
                                                <td style="text-align:center;">xxxxx</td>
                                            </tr>
                                            <tr>
                                                <td style="text-align:center;">2</td>
                                                <td style="text-align:center;">12/07/16 12:00</td>
                                                <td style="text-align:center;">12/07/17 18:00</td>
                                                <td style="text-align:center;">XXXX</td>
                                                <td style="text-align:center;">Fortuner</td>
                                                <td style="text-align:center;">xxxxx</td>
                                            </tr>
                                            <tr>
                                                <td style="text-align:center;">3</td>
                                                <td style="text-align:center;">12/07/16 12:00</td>
                                                <td style="text-align:center;">12/07/17 18:00</td>
                                                <td style="text-align:center;">XXXX</td>
                                                <td style="text-align:center;">Fortuner</td>
                                                <td style="text-align:center;">xxxxx</td>
                                            </tr>
                                            <tr>
                                                <td style="text-align:center;">4</td>
                                                <td style="text-align:center;">12/07/16 12:00</td>
                                                <td style="text-align:center;">12/07/17 18:00</td>
                                                <td style="text-align:center;">XXXX</td>
                                                <td style="text-align:center;">Fortuner</td>
                                                <td style="text-align:center;">xxxxx</td>
                                            </tr>
                                        </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="panel panel-default box-shadow font-detail2">
                                <div class="panel-heading">
                                    <hgroup>
                                        <h3 class="panel-title">รายงานการใช้แบบรายเดือน</h3>
                                    </hgroup>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                            <div class="row" >
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-mm">
                                                    มกราคม
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-road">
                                                    ระยะทาง 
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-mm">
                                                    กรกฎาคม
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-road">
                                                    ระยะทาง
                                                </div>
                                            </div>
                                            <div class="row" >
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-mm">
                                                    กุมภาพันธ์
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-road">
                                                    ระยะทาง
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-mm">
                                                    สิงหาคม
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-road">
                                                    ระยะทาง
                                                </div>
                                            </div>
                                            <div class="row" >
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-mm">
                                                    มีนาคม
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-road">
                                                    ระยะทาง
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-mm">
                                                    กันยายน
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-road">
                                                ระยะทาง
                                                </div>
                                            </div>
                                            <div class="row" >
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-mm">
                                                    เมษายน
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-road">
                                                    ระยะทาง
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-mm">
                                                    ตุลาคม
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-road">
                                                    ระยะทาง
                                                </div>
                                            </div>
                                            <div class="row" >
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-mm">
                                                    พฤษภาคม
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-road">
                                                    ระยะทาง
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-mm">
                                                    พฤศจิกายน
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-road">
                                                    ระยะทาง
                                                </div>
                                            </div>
                                            <div class="row" >
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-mm">
                                                    มิถุนายน
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-road">
                                                    ระยะทาง
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-mm">
                                                    ธันวาคม
                                                </div>
                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 bg-road">
                                                    ระยะทาง
                                                </div>
                                            </div>  
                                        </div>
                                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 bg-mm" style="height:inherit;">
                                            <br />
                                            <br />
                                            ระยะทางทั้งหมด
                                            <br />
                                            <div class="row">
                                                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 bg-mm">
                                                
                                                </div>
                                                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 bg-road">
                                                    1000 กิโลเมตร
                                                </div>
                                                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 bg-mm">
                                                
                                                </div>
                                            </div>
                                            <br />
                                            <br />
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="text-align:right;">
                                        Last Update 20/6/2559
                            </div>
                        </div>
                    </div>
                </div>
            </div>  
        </div>
    </div>
</body>
</html>
